<template>
  <h1>echarts示例</h1>
  <div class="box">
    <div class="zhu-box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, reactive } from "vue";
import { getSimpleDataApi, getKDataApi } from "@/api/echartsDemo.ts";

const simpleData = reactive<{ weeks: string[]; sales: number[] }>({
  weeks: [],
  sales: [],
});

// 获取图表数据
function getSimpleData(cb) {
  getSimpleDataApi().then((res) => {
    if (res.data.code === "200") {
      res.data.data.forEach((item) => {
        simpleData.weeks.push(item.x);
        simpleData.sales.push(item.val);
      });
      cb();
    }
  });
}

onMounted(firstChart);

// 创建第一个图标(基本示例，没有发送请求)
function firstChart() {
  // 初始化echarts图表
  var myChart = echarts.init(document.querySelector(".zhu-box") as HTMLElement);

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: "2023年不同商品的销量",
    },
    tooltip: {},
    legend: {
      data: ["销量", "利润率"],
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 200, 36, 10, 10, 20, 15],
      },
      {
        name: "利润率",
        type: "line",
        data: [30, 50, 20, 8, 15, 1, 10],
      },
    ],
  };
  myChart.setOption(option);
}

onMounted(secondChart);
// 获取简单图表数据并渲染
function secondChart() {
  console.log("simpleData.weeks", simpleData.weeks.length);
  console.log("simpleData.sales", simpleData.sales.length);

  // 初始化echarts图表
  var myChart = echarts.init(document.querySelector(".box2") as HTMLElement);

  getSimpleData(() => {
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "2023年不同商品的销量",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: simpleData.weeks,
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: simpleData.sales,
        },
      ],
    };

    myChart.setOption(option);
  });
}

onMounted(threeChart);

function threeChart() {
  // 初始化echarts图表
  var myChart = echarts.init(document.querySelector(".box3") as HTMLElement);

  getKDataApi().then((res) => {
    if (res.data.code === "200") {

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "K线图",
        },
        tooltip: {},
        legend: {
          data: ["开盘价", "收盘价", "最低价", "最高价"],
        },
        xAxis: {
          data: res.data.data.x,
        },
        yAxis: {},
        series: [
            {
                type: 'candlestick',
                data: res.data.data.val
            }
        ],
      };

      myChart.setOption(option);
    }
  });
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.zhu-box {
  width: 600px;
  height: 400px;
  border: 1px solid tomato;
}

.box2 {
  @extend .zhu-box;
  border: 1px solid blue;
}

.box3 {
  @extend .zhu-box;
  border: 1px solid skyblue;
}
</style>
